// // 5. 请求用户信息
// userInfoAPI({}, res => {
//     var { user_pic } = res.data.data;
//     if (user_pic) $("#image").attr("src", user_pic);

//     // 1. 初始化裁剪插件
//     var cropper = new Cropper($("#image")[0], {
//         aspectRatio: 1, // 裁剪图层的横纵比例
//         preview: $(".img-preview") // 多看文档里每个属性的意思, 一般都会有, 实在没用自己写/换个插件
//     });

//     // 2. 上传图片 - 点击事件
//     $(".select").on("click", () => {
//         // JS触发一次file的点击事件 -弹出选择文件窗口
//         $("#file").click();
//     })

//     // 3. 监测 - 文件选择器的变化
//     $("#file").on("change", ev => {
//         console.log(ev.target.files);
//         // 取到选择的一个文件
//         var [file] = ev.target.files;
//         // URL是JS内置对象 - 用于做前端图片 - 本地预览的(无需后台)
//         // File对象是一种特殊的Blob类型(Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取)
//         // 使用 Blob 创建一个指向类型化数组的URL - 有了url才能用在img的src上
//         var imgUrl = URL.createObjectURL(file);
//         // 替换拆剪区域图片
//         cropper.replace(imgUrl)
//     })

//     // 4. 点击确定 - 上传图片给后台
//     $(".sure").on("click", () => {
//         // 把裁剪的图片 - 转成base64字符串
//         const canvas = cropper.getCroppedCanvas({
//             width: 100,
//             height: 100
//           });
//         var base64 = canvas.toDataURL('image/png'); // canvas标签 转base64字符串

//         // 注意这里的参数, 必须url编码否则后台接收有问题
//         var arg = "avatar=" + encodeURIComponent(base64);

//         // 调用接口
//         upAvatarAPI(arg, () => {
//             // 成功后 - 让父级index.html页面 - 调用它index.js里window上的getUserInfo()方法, 重新请求用户头像, 并且铺设页面
//             window.parent.getUserInfo();
//         });
//     })
// });

//0、获取用户信息
getInfoAPI({}, res => {
    let { user_pic } = res.data.data;
    if (user_pic != null) {
        cropper.replace(user_pic);
    }
})

//头像
const image = document.getElementById('image');
const cropper = new Cropper(image, {
    aspectRatio: 1,
    crop(event) {
        console.log(event.detail.x);
        console.log(event.detail.y);
        console.log(event.detail.width);
        console.log(event.detail.height);
        console.log(event.detail.rotate);
        console.log(event.detail.scaleX);
        console.log(event.detail.scaleY);
    },
    preview: $('.img-preview')
});

//上传文件
$('.select').on('click', e => {
    $('#file').click();
})
//新窗口出现
$('#file').on('change', function (e) {
    var url = URL.createObjectURL(this.files[0]);
    cropper.replace(url)
})
//确定按钮点击事件
$('.sure').on('click', e => {
    var canvar = cropper.getCroppedCanvas({
        width: 100,
        height: 100
    });
    var base64Str = canvar.toDataURL('image/png');
    base64Str = encodeURIComponent(base64Str);
    var argStr = 'avatar=' + base64Str;
    upHeadImgAPI(argStr, res => {
        window.parent.getInfo();
    })
})